<template>
    <div>
      <headCommod/>
      <div ref="userinfo" class="container userinfo cl">
        <div class="left to-right">
          <asideCommod/>
        </div>
        <div class="right">
          <breadcrumbCommod class="to-bottom" title="供应商"/>
          <div class="main bg-white to-left">
            <div class="info">
              <div class="info-head cl">
                <div class="form-right">
                  <el-button type="success" size="mini" icon="el-icon-plus" plain>新增</el-button>
                </div>
              </div>
              <div class="contact">
                <div class="list cl">
                  <table class="wj-table">
                    <tr>
                      <th>名称</th>
                      <th>手机号</th>
                      <th>邮箱</th>
                      <th>地址</th>
                      <th>操作</th>
                    </tr>
                    <tr v-for="item in 4" class="wj-table-shadown">
                      <td>TEST123</td>
                      <td>TEST123</td>
                      <td>TEST123</td>
                      <td>TEST123</td>
                      <td width="200px">
                        <el-button size="mini" type="success" plain>修改</el-button>
                        <el-button size="mini" type="success" plain>删除</el-button>
                      </td>
                    </tr>
                  </table>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import headCommod from '../components/Head'
import asideCommod from '../components/Aside'
import breadcrumbCommod from '../components/Breadcrumb'

export default {
  name: 'supplier',
  data () {
    return {
      contacts: [{isShow: true}, {isShow: false}, {isShow: false}, {isShow: false}]
    }
  },
  mounted () {
  },
  components: {
    headCommod,
    asideCommod,
    breadcrumbCommod
  }
}
</script>

<style scoped>
 .info {
   background: #fff;
   border-radius: 10px;
   padding: 20px 10px;
   position: relative;
 }

  .info-head h3 {
    float: left;
  }

 .info-head span {
   position: absolute;
   right: 10px;
   top: -4px;
   cursor: pointer;
 }

  .info-head img {
    position: relative;
    top: 14px;
    right: -7px
  }

  .contact .btns li{
    width: 33.33%;
    text-align: center;
    list-style: none;
    float:left;
    cursor: pointer;
  }

 .contact-row img.isShow {
    float: right;
  }

 .contact-row {
   line-height: 38px;
 }

  .contact-row span {
    background: #ebeff8;
    width: 47px;
    float: left;
  }

 .contact-row img {
   float: left;
 }

  .contact-info {
    border-radius: 3px;
    overflow: hidden;
    background: #fff;
    /*box-shadow: 0px 3px 5px #aaa;*/
    border: 1px solid #ddd;
    margin-bottom: 5px;
  }

  .contact-item {
    background: #ebeff8;
    border-radius: 10px;
    margin: 10px 0;
  }

  .main {
    margin-top: 10px;
  }

 .list {
   background: #f1f2f6;
   padding: 10px 0;
   margin-top: 15px;
 }

</style>
